<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>好运网</title>
</head>
<body>

<div th:fragment="accountsetting">
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" type="text/css" href="css/center.css"/>
    <script>
        function accountSettingForm(formName) {
            if ("updatePasswordForm" == formName) {
                if ($("#setting_pwd_box_newpwd").val() != $("#setting_pwd_box_newpwd2").val()) {
                    alertWorning('确认密码不正确');
                    return;
                }
            }
            $.ajax({
                method: "POST",
                url: "/updateUserInfo",
                data: $("#" + formName).serializeArray(),
                dataType: "json"
            }).done(function (msg) {
                if (msg.status == 'success') {
                    alertGood('保存成功!');
                } else {
                    alertWorning(msg.data)
                }
            });
        }

        var countDownNumber = 60;
        var initTimer;

        function countdown(divId,obj) {
            if(countDownNumber>1){
                $("#"+divId).text(--countDownNumber);
            }else{
                window.clearInterval(initTimer);
                countDownNumber = 60;
                $(obj).show();
            }
        }

        function sendMsgToEmailPhone(msgType,inputId,obj) {
            var address = $("#"+inputId).val();
            if(address.length == 0){
                if(msgType==2){
                    alertWorning('邮箱不能为空！');
                }else{
                    alertWorning('手机号不能为空！');
                }
                return;
            }
            $.ajax({
                method: "POST",
                url: "/sendMsgToEmailPhone",
                data: {msgType:msgType,address:address},
                dataType: "json"
            }).done(function (msg) {
                if (msg.status == 'success') {
                    $(obj).hide()
                    //countdown("emailTiming",obj);
                    initTimer= setInterval(function(){
                        countdown('emailTiming',obj)
                    },100);
                } else {
                    alertWorning(msg.data)
                }
            });
        }

        function selectSettingBox(type) {
            $(".as_menu_icon").attr("class", "as_triangle_down");
            $(".as_info").attr("class", "as_info");
            $("#setting_" + type + "_bt").attr("class", "as_info as_info_select");
            $("#setting_" + type + "_icon").attr("class", "as_menu_icon zx_icon as_" + type);
            $(".setting_box_div").hide();
            $("#setting_" + type + "_box").show();
        }

        $(function () {
            var currentUrl = window.location.href.split('#')
            if(currentUrl.length >1){
                selectSettingBox(currentUrl[1]);
            }else{
                selectSettingBox('basicinfo');
            }
        })

    </script>
    <div class="as_fl20_right">
        <div class="as_fl20">
            <h3 class="as_fl20_h3">账号设置:</h3>
            <div class="as_cn">

                <div class="as_menu_icon  zx_icon " id="setting_basicinfo_icon">
                    <a id="setting_basicinfo_bt" class="as_info as_info_select" onclick="selectSettingBox('basicinfo')"
                     >基本信息</a>
                </div>

                <div class="as_triangle_down" id="setting_pwd_icon"><a id="setting_pwd_bt"
                                                                       onclick="selectSettingBox('pwd')"
                                                                       class="as_info">密码管理</a></div>
                <div class="as_triangle_down" id="setting_phone_icon"><a id="setting_phone_bt"
                                                                         onclick="selectSettingBox('phone')"
                                                                         class="as_info">手机管理</a></div>
                <div class="as_triangle_down" id="setting_mail_icon"><a id="setting_mail_bt"
                                                                        onclick="selectSettingBox('mail')"
                                                                        class="as_info">邮箱管理</a></div>
            </div>
        </div>
        <div class="as_fr80">
            <div style="padding:0px 20px;">
                <form id="accountSettingForm">
                    <div id="setting_basicinfo_box" class="setting_box_div" style="text-align: left;  display:block; ">
                        <div class="as_info_xx" style="height:30px"></div>
                        <div class="as_info_xx">
                            <div class="as_info_cns ">姓名：</div>
                            <div class="as_info_cn1" style=" letter-spacing: 2px; color: #444;">
                                <input name="isFristName" type="hidden" id="isFristName" value="1">
                                <input name="FirstName" type="text" id="FirstName"
                                       th:value="${session.loginSession.realName}" placeholder="真实姓名"
                                       class="r_inptut inputwd300" style="width: 150px">
                                <div class="r_inptut " id="memberNamelab" style="display: none; width: auto;"></div>
                                <label id="FirstNamelab" class="as_info_tip">*仅允许修改一次，提款人姓名必须与注册姓名一致。</label>
                            </div>

                        </div>
                        <div class="as_info_xx">
                            <div class="as_info_cns">性别：</div>
                            <div class="as_info_cn1">
                                <select name="sex" id="Gender" style="width: 75px; height: 35px; text-align: center;">
                                    <option th:selected="${sex==1}" value="1">男</option>
                                    <option th:selected="${sex==2}" value="2">女</option>
                                </select>
                                <span class="as_info_tip">*必填</span></div>
                        </div>
                        <div class="as_info_xx">
                            <div class="as_info_cns">出生日期：</div>
                            <div class="as_info_cn1">
                                <input name="userYear" th:value="${userYear}" type="text" id="BYear" placeholder="年份"
                                       class="r_inptut inputwd140" style="width: 112px;">
                                <select name="userMonth" id="BMonth" class="inputwd140"
                                        style="height: 42px; text-align: center; width: 112px;">
                                    <option th:selected="${userMonth == '1'}" value="1">1月</option>
                                    <option th:selected="${userMonth == '2'}" value="2">2月</option>
                                    <option th:selected="${userMonth == '3'}" value="3">3月</option>
                                    <option th:selected="${userMonth == '4'}" value="4">4月</option>
                                    <option th:selected="${userMonth == '5'}" value="5">5月</option>
                                    <option th:selected="${userMonth == '6'}" value="6">6月</option>
                                    <option th:selected="${userMonth == '7'}" value="7">7月</option>
                                    <option th:selected="${userMonth == '8'}" value="8">8月</option>
                                    <option th:selected="${userMonth == '9'}" value="9">9月</option>
                                    <option th:selected="${userMonth == '10'}" value="10">10月</option>
                                    <option th:selected="${userMonth == '11'}" value="11">11月</option>
                                    <option th:selected="${userMonth == '12'}" value="12">12月</option>
                                </select>
                                <input name="userDay" type="text" id="BDay" th:value="${userDay}" placeholder="日期"
                                       class="r_inptut inputwd140" style="width: 112px;">
                                <span class="as_info_tip">*必填</span></div>
                        </div>
                        <div class="as_info_xx">
                            <div class="as_info_cns">收货地址：</div>
                            <div class="docs-methods">
                                <form class="form-inline">
                                    <div id="distpicker">
                                        <div class="form-group fl m10r">
                                            <script>

                                                $(function () {

                                                    $("#provinceSelect").change(function () {
                                                        getNameForNextOne($(this), 'citySelect');
                                                    });

                                                    $("#citySelect").change(function () {
                                                        getNameForNextOne($(this), undefined, 'district');
                                                    });

                                                    function getNameForNextOne(obj, provinceSelectId, citySelectId) {
                                                        var code = $(obj).find("option:selected").attr("itemvalue");
                                                        var tempSelect;
                                                        var jsonParam = {};
                                                        if (provinceSelectId != undefined) {
                                                            jsonParam = {'provinceCode': code};
                                                            tempSelect = provinceSelectId;
                                                        }
                                                        if (citySelectId != undefined) {
                                                            jsonParam = {'cityCode': code};
                                                            tempSelect = citySelectId;
                                                        }

                                                        $.ajax({
                                                            method: "POST",
                                                            url: "/getCityAndAreaNames",
                                                            data: jsonParam,
                                                            dataType: "json"
                                                        }).done(function (msg) {
                                                            if (msg.status == 'success') {
                                                                var list = msg.data;
                                                                var cityStr = "";
                                                                for (var i = 0; i < list.length; i++) {
                                                                    cityStr += "<option itemvalue='" + list[i].code + "'  value='" + list[i].name + "'>" + list[i].name + "</option>";
                                                                }
                                                                $("#" + tempSelect).html(cityStr);
                                                            } else {
                                                                alertWorning(msg.data)
                                                            }
                                                        });
                                                    }
                                                });


                                            </script>

                                            <label class="sr-only" for="provinceSelect"></label>
                                            <select class="form-control" name="province" id="provinceSelect">
                                                <option th:each="item:${provinceList}" th:value="${item.name}"
                                                        th:selected="${item.name==session.loginSession.province}"
                                                        th:attr="itemValue=${item.code}" th:text="${item.name}">—— 省 ——
                                                </option>
                                            </select>
                                        </div>
                                        <div class="form-group fl m10r">
                                            <label class="sr-only" for="citySelect"></label>
                                            <select class="form-control" name="city" id="citySelect">
                                                <option th:each="item:${cityList}"
                                                        th:selected="${item.name==session.loginSession.city}"
                                                        th:value="${item.name}" th:text="${item.name}"
                                                        th:attr="itemValue=${item.code}">—— 市 ——
                                                </option>
                                            </select>
                                        </div>
                                        <div class="form-group fl m10r">
                                            <label class="sr-only" for="district"></label>
                                            <select class="form-control" name="area" id="district">
                                                <option th:each="item:${areaList}"
                                                        th:selected="${item.name==session.loginSession.area}"
                                                        th:value="${item.name}" th:text="${item.name}"
                                                        th:attr="itemValue=${item.code}">—— 区 ——
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="as_info_xx">
                            <div class="as_info_cns">街道：</div>
                            <div class="as_info_cn1" style="line-height:40px;">
                                <input name="address" type="text" th:value="${session.loginSession.address}"
                                       id="Address" class="r_inptut" style="width:520px;">
                                <span class="as_info_tip">请填写真实地址，参加节日活动将获取小礼物。</span></div>
                        </div>
                        <div class="as_info_xx">
                            <div class="as_info_cns">　</div>
                            <div class="as_info_cn1" style="line-height:40px; display:inline-block">
                                <button id="information_bt" type="button"
                                        onclick="accountSettingForm('accountSettingForm')" class="as_but inputwd300"> 保存
                                </button>
                            </div>
                        </div>
                    </div>
                </form>


                <div id="setting_pwd_box" class="setting_box_div">
                    <form id="updatePasswordForm">
                        <div class="as_info_xx" style="height:30px"></div>
                        <div class="from_Centered">
                            <div class="setting_pwd_box_row"> 原密码 ：
                                <input id="setting_pwd_box_oldpwd" name="oldpassword" class="r_inptut inputwd300"
                                       type="password">
                            </div>
                            <div class="setting_pwd_box_row"> 新密码 ：
                                <input id="setting_pwd_box_newpwd" name="newpassword" class="r_inptut inputwd300"
                                       type="password">
                            </div>
                            <div class="setting_pwd_box_row"> 确认密码：
                                <input id="setting_pwd_box_newpwd2" class="r_inptut inputwd300" type="password">
                            </div>
                            <div class="setting_pwd_box_row">
                                <button id="setting_pwd_box_submit" onclick="accountSettingForm('updatePasswordForm')"
                                        type="button" class="as_but inputwd300"> 完成
                                </button>
                            </div>
                        </div>
                    </form>
                </div>


                <div id="setting_mail_box" class="setting_box_div">
                    <div class="as_info_xx" style="height:30px"></div>
                    <div th:style="${session.loginSession.emailStatus==0? 'display:block':'display:none'}">
                        <div   class="from_Centered">
                            <form id="updateEmailForm">
                                <div class="setting_pwd_box_row"> 邮箱地址 ：
                                    <input id="setting_mail_box_mailnumber" name="email" value="3491286801@qq.com" class="r_inptut inputwd300" type="text">
                                </div>
                                <div class="setting_pwd_box_row"> 验证码：
                                    <input id="setting_mail_box_code" name="msgCode" class="r_inptut inputwd300" type="text"
                                           style="width:177px;vertical-align: middle;">
                                    <span class="setting_phone_tip"> <a onclick="sendMsgToEmailPhone(2,'setting_mail_box_mailnumber',this);" id="GetEmailCodeBt">获取验证码</a> <b id="GetEmailTime" ><span
                                            class="time_sec" id="emailTiming">60</span>s</b> </span></div>
                                <div class="setting_pwd_box_row">
                                    <button id="setting_mail_box_submit" type="button"
                                            onclick="accountSettingForm('updateEmailForm')" class="as_but inputwd300">完成
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>



                    <div th:style="${session.loginSession.emailStatus==1? 'display:block':'display:none'}">
                        <div class="from_Centered"  style="margin:0 auto; text-align:center;">
                            <img src="images/b1.jpg"><br><br>
                            阁下已绑定的邮箱<br>
                            <span th:text="${session.loginSession.email}"></span><br><br>
                            <a class="bangd" onclick="$('#setting_mail_box').find('.from_Centered').eq(1).parent().hide();$('#setting_mail_box').find('.from_Centered').eq(0).parent().show();" >更换绑定的邮箱</a>
                        </div>
                    </div>
                </div>

                <div id="setting_phone_box" class="setting_box_div">
                    <div class="as_info_xx" style="height:30px"></div>
                    <div th:style="${session.loginSession.phoneStatus==0? 'display:block':'display:none'}">
                    <div class="from_Centered">
                        <form id="updatePhoneForm">
                            <div class="setting_pwd_box_row"> 手机号码：
                                <input id="setting_phone_box_phonenumber" class="r_inptut inputwd300" type="text">
                            </div>
                            <div class="setting_pwd_box_row"> 验证码：
                                <input id="setting_phone_box_code" class="r_inptut inputwd300" type="text"
                                       style="width:177px;vertical-align: middle;">
                                <span class="setting_phone_tip"><a id="GetPhoneCodeBt">获取验证码</a> <b id="GetPhoneTime"
                                                                                                    style="display: none; "><span
                                        class="time_sec" id="phoneTiming">60</span>s</b></span></div>
                            <div class="setting_pwd_box_row">
                                <button id="setting_phone_box_submit" type="button"
                                        onclick="accountSettingForm('updatePhoneForm')" class="as_but inputwd300"> 完成
                                </button>
                            </div>
                        </form>
                    </div>
                    </div>

                    <div th:style="${session.loginSession.phoneStatus==1? 'display:block':'display:none'}">

                        <div class="from_Centered" style="margin:0 auto; text-align:center;">
                            <img src="images/b2.jpg"><br><br>
                            阁下已绑定的手机<br>
                            <span th:text="${session.loginSession.phone}"></span><br><br>
                            <a class="bangd" onclick="$('#setting_phone_box').find('.from_Centered').eq(1).parent().hide();$('#setting_phone_box').find('.from_Centered').eq(0).parent().show();">更换绑定的手机</a>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
</body>
</html>